<template>
	<view class="wrap">
		<view class="" v-if="applyList.length">
			<view class="title">
				<text>{{ appData.Title }}</text>
			</view>
			<view class="">
				<view class="people_box" v-for="(item, index) in applyList" :key="index">
					<view class="avatar_info flx flx_align_center" @click="nav_to(`/pages/user/user_visitor?id=${item.UserID}`)">
						<view class="avatar">
							<image @click="prevAvatar(item.HeadImgUrl)" :src="item.HeadImgUrl" mode=""></image>
						</view>
						<view class="name_info">
							<view class="name">{{ item.Name }}</view>
							<view class="right_info">
								<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710382831357669.png" mode="" />
								<text v-if="item.Birthday">{{ getYearStr(item.Birthday) }}后</text>
								<image v-if="item.Birthday" :src="constellate(item.Birthday).icon" mode="" />
								<text v-if="item.Birthday">{{ constellate(item.Birthday).Name }}</text>
								<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710382852180886.png" mode="" />
								<text>{{ item.UserCity }}</text>
								<text class="member member_he" v-if="getUserType(item.UserType) == 1">年卡</text>
								<text class="member number_huan" v-if="getUserType(item.UserType) == 2">金卡</text>
								<text class="member number_huan" v-if="getUserType(item.UserType) == 3">银卡</text>
							</view>
						</view>
					</view>
					<view class="desc_info"></view>
					<view class="footer_info flx flx_align_center flx_justify_center">
						<block v-if="item.IsInvite != 1">
							<view v-if="item.Status == -1" class="rejected" disabled>已拒绝</view>
							<view v-else-if="item.Status == 1" class="confirmed" disabled>已同意</view>
							<view v-else-if="item.Status == 2" class="confirmed" disabled>已签到</view>
							<view v-else-if="item.Status == 3" class="confirmed" disabled>已领奖励</view>
							<view v-if="item.Status == 0" class="reject_info">
								<view class="reject" @click="auditItem(item.ID, item.UserID, item.AppointmentID, -1, index)">拒绝</view>
							</view>
							<view v-if="item.Status == 0" class="confirm_info">
								<view class="confirm" @click="auditItem(item.ID, item.UserID, item.AppointmentID, 1, index)">同意</view>
							</view>
						</block>
						<block v-else>
							<view v-if="item.Status == 0" class="rejected" disabled>邀请用户，等待对方确认</view>
							<view v-else-if="item.Status == -1" class="rejected" disabled>已拒绝</view>
							<view v-else-if="item.Status == 1" class="confirmed" disabled>已同意</view>
							<view v-else-if="item.Status == 2" class="confirmed" disabled>已签到</view>
							<view v-else-if="item.Status == 3" class="confirmed" disabled>已领奖励</view>
						</block>
					</view>
				</view>
			</view>
		</view>

		<block v-else>
			<u-empty
				mode="list"
				width="64"
				height="64"
				icon="https://golfdate.oss-cn-shenzhen.aliyuncs.com/community/20230510114106.png"
				:show="true"
				iconSize="32"
				text="先别急,很快就有人报名"
			></u-empty>
		</block>
	</view>
</template>

<script>
export default {
	data() {
		return {
			applyList: [],
			appData: [],
			user: {}
		};
	},
	computed: {
		getUserType(l) {
			return (l) => {
				if (l.indexOf('年') != -1) {
					return 1;
				} else if (l.indexOf('金') != -1) {
					return 2;
				} else if (l.indexOf('银') != -1) {
					return 3;
				} else {
					return 0;
				}
			};
		}
	},
	async onLoad(e) {
		this.user = uni.getStorageSync('user');
		await this.$api.post('/Common/Add_ViewPath', { Path: 'ball_people_confirm', Platform: uni.getStorageSync('platform') });

		if (e.id) {
			let res = await this.$api.post('Appointment/Detail', {
				ID: e.id
			});

			if (res.data) {
				this.appData = res.data;
				this.applyList = res.data.Item.filter((v) => v.IsMySelf == 0).map((v) => {
					return v;
				});
			}
		}
	},
	methods: {
		async auditItem(id, uID, appointmentId, status, index) {
			const res = await this.$api.post('Appointment/AuditItem', {
				ID: id,
				AppointmentID: appointmentId,
				Status: status
			});
			if (!res.data) {
				this.$pv.msg(res.message);
				return;
			}
			if (this.applyList[index]) {
				this.applyList[index].Status = status;
				this.applyList = [...this.applyList];
			}

			uni.$emit('people_confirm', {});

			// 获取用户
			let user_cache = await this.$api.post('/user/GetUserInfo', {
				ID: uID
			});

			const groupID = uni.$prefix + appointmentId.toString();
			const userIDs = uni.$prefix + uID.toString();
			if (status == 1) {
				await this.$im.inviteUsersIntoGroup({ groupID, userIDs });
				const user = uni.getStorageSync('user');
				await this.$im.sendCustomMessage({
					conversationID: groupID,
					subType: 51, //直接加入群聊
					conversationType: 2,
					message: JSON.stringify({
						id: groupID,
						nickName: user_cache.data.Name,
						userID: user_cache.data.UserID,
						operatorNickName: user.Name,
						operatorUserID: user.UserID
					})
				});
			}

			this.$pv.msg('操作成功');
		},
		prevAvatar(url) {
			uni.previewImage({
				current: 0,
				urls: [url]
			});
		}
	}
};
</script>

<style lang="scss">
page,
.wrap {
	height: 100%;
	background-color: #f6f6f6;
}

image {
	width: 100%;
	height: 100%;
}

.avatar_info {
	.avatar,
	image {
		border-radius: 50%;
	}

	.avatar {
		margin-right: 20rpx;
		width: 92rpx;
		height: 92rpx;
	}
}

.confirmed {
	width: 100%;
	// background: linear-gradient(180deg, #fef0bc 0%, #b98b51 100%);
	background-color: #202020;
	border-radius: 48rpx;
	padding: 22rpx 110rpx;
	margin: 12rpx;
	// color: #4c310c;
	color: #fff;
}

.rejected {
	padding: 22rpx 110rpx;
	border-radius: 48rpx;
	border: 2rpx solid #333;
	margin: 12rpx;
	width: 100%;
}

.footer_info {
	flex-wrap: wrap;
	margin-top: 40rpx;

	> view {
		text-align: center;
		width: 50%;
	}

	.reject {
		padding: 22rpx 80rpx;
		border-radius: 48rpx;
		border: 2rpx solid #333;
		margin: 12rpx;
	}

	.confirm {
		background-color: #333;
		border-radius: 48rpx;
		padding: 22rpx 110rpx;
		margin: 12rpx;
		color: #fff;
	}
}

.name_info {
	.name {
		font-size: 36rpx;
		color: #333;
	}

	.tag_info {
		font-size: 28rpx;
		font-weight: 500;
	}

	.right_info {
		line-height: 50rpx;

		image {
			height: 32rpx;
			width: 32rpx;
			margin-right: 10rpx;
		}

		text {
			display: inline-block;
			padding-right: 16rpx;
			font-size: 34rpx;
			color: #333;
		}

		.member {
			display: inline-block;
			width: 68rpx;
			height: 32rpx;
			background: linear-gradient(135deg, #7e7e7e 0%, #292929 100%);
			border-radius: 2px;
			border: 2px solid #d6c6ab;
			text-align: center;
			color: #fff;
			font-size: 16rpx;
			line-height: 32rpx;
			padding-left: 0;
			padding-right: 0;
		}

		.number_huan {
			color: #4c310c;
			background: linear-gradient(180deg, #fdf9f6 0%, #e1c4a6 100%);
			border: 2rpx solid #e6ceb5;
		}
	}
}

.people_box {
	padding: 32rpx;
	margin: 20rpx 32rpx;
	background: #fff;
	border-radius: 16rpx;
}

.title {
	padding: 20rpx 0 10rpx;
	margin-left: 30rpx;
	font-size: 44rpx;
	line-height: 60rpx;
}
</style>
